<template>
  <el-aside :class="sideBarClass" style="background-color: #eee;">
    <el-row>
      <el-button @click="changeCollapsed" :class="collapseBtnClass" size="small"></el-button>
    </el-row>
    <el-menu :collapse="collapsed">
      <el-submenu index="1">
        <template slot="title"> 
          <i class="el-icon-location"></i>
          <span slot="title">导航一</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1" @click="handleClick('hello')">选项1</el-menu-item>
          <el-menu-item index="1-2" @click="handleClick('home')">选项2</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </el-aside> 
</template>

<script>
export default {
  name: "SideBar",
  data() {
    return {
      sideBarClass: "side-bar-hidden", // sideBar Class属性值
      collapseBtnClass: "collapse-btn el-icon-d-arrow-right", // 折叠板按钮 Class属性值
      collapsed: true // sideBar是否折叠
    }
  }, 
  methods: {
    handleClick (path) {
      this.$router.push({path: path});
    },
    changeCollapsed () {
      // 改变sideBar折叠状态
      this.collapsed = !this.collapsed;
      this.sideBarClass = this.sideBarClass === "side-bar-show" ? "side-bar-hidden" : "side-bar-show";
      this.collapseBtnClass = this.collapseBtnClass === "collapse-btn el-icon-d-arrow-right" ? 
        "collapse-btn el-icon-d-arrow-left" : "collapse-btn el-icon-d-arrow-right";
    }
  }
}
</script>

<style lang="stylus" scoped>
  // sideBar显示的时候最大宽度
  .side-bar-show
    overflow hidden
    max-width 200px
  // sideBar隐藏的时候最大宽度
  .side-bar-hidden
    overflow hidden
    max-width 64px
  // 折叠板按钮
  .collapse-btn
    width 64px
    background-color rgb(236,245,255)
    border-color rgb(236,245,255)
    text-align center
    border-radius 0
    color #000
  .collapse-btn:focus
    border-color rgb(236,245,255)
    background-color rgb(236,245,255)
    color #000
  .collapse-btn:hover
    border-color rgb(236,245,255)
</style>